<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>款式</title>
	
	<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
	<script src="js/jquery.min.js?v=2.1.4"></script>
<!--	"http://localhost:8081/lecture/fileupload.do"-->
	<!--文件上传js	-->
	

	</head>

<body>
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
            <div class="col-sm-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>新增款式</h5>
						</div>
						<div class="ibox-content">
							<form class="form-horizontal m-t" id="commentForm" onsubmit="return uploadForm();">
								<div class="form-group">
									<label class="col-sm-3 control-label">款式名：</label>
									<div class="col-sm-8">
										<input id="stylename" name="stylename" minlength="2" type="text" class="form-control" required="" aria-required="true">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">款号：</label>
									<div class="col-sm-8">
										<input id="styleid" name="styleid" minlength="2" maxlength="15" type="text" class="form-control" required="number" aria-required="true">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">颜色：</label>
									<div class="col-sm-8">
							
										<input id="colour" name="colour" type="color" value="#DC143C"/>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">规格：</label>
									<div class="col-sm-8">
										<select id="standard" class="form-control m-b" name="standard">
                                        <option value="S">S</option>
                                        <option value="M">M</option>
                                        <option value="L">L</option>
                                        <option value="XL">XL</option>
										<option value="XXL">XXL</option>
										<option value="XXXL">XXXL</option>
                                    </select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">号型：</label>
									<div class="col-sm-8">
										<input id="size" name="size" class="form-control" placeholder="例如：155/76A" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">面料：</label>
									<div class="col-sm-8">
										<input id="material" name="material" class="form-control" >
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">零售价：</label>
									<div class="col-sm-8">
										<input id="price" name="price" minlength="1" type="text" class="form-control" required="number" aria-required="true">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">图片：</label>
									<div class="col-sm-8">
										<input type="text" name="picture" id="picture"  class="form-control" >
<!--										<form id="uploadForm" enctype="multipart/form-data">-->
										<input name="file1" type="file" value="选择" size="20" id="fileUpload1" onchange ="uploadFile()"/>
											
<!--										</form>-->
									</div>
									
								</div>
								
																 
								
								
<!--
<div class="wrapper wrapper-content animated fadeInRight">
        
        <div class="row">
            <div class="col-sm-12">
                
             <div class="ibox float-e-margins">
                    <div class="ibox-title  back-change">
                        <h5>图片裁剪 <small>http://fengyuanchen.github.io/cropper/</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项 01</a>
                                </li>
                                <li><a href="#">选项 02</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <p>
                            一款简单的jQuery图片裁剪插件
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="image-crop">
                                    <img src="img/a3.jpg">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h4>图片预览：</h4>
                                <div class="img-preview img-preview-sm"></div>
                                <h4>说明：</h4>
                                <p>
                                    你可以选择新图片上传，然后下载裁剪后的图片
                                </p>
                                <div class="btn-group">
                                    <label title="上传图片" for="inputImage" class="btn btn-primary">
                                        <input id="file1" type="file" accept="image/*" name="file1" class="hide" onClick="imageUpload()"> 上传新图片
                                    </label>
                                    <label title="下载图片" id="download" class="btn btn-primary">下载</label>
                                </div>
                                <h4>其他说明：</h4>
                                <p>
                                    你可以使用<code>$({image}).cropper(options)</code>来配置插件
                                </p>
                                <div class="btn-group">
                                    <button class="btn btn-white" id="zoomIn" type="button">放大</button>
                                    <button class="btn btn-white" id="zoomOut" type="button">缩小</button>
                                    <button class="btn btn-white" id="rotateLeft" type="button">左旋转</button>
                                    <button class="btn btn-white" id="rotateRight" type="button">右旋转</button>
                                    <button class="btn btn-warning" id="setDrag" type="button">裁剪</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
</div>			
-->
								
<!--
								<div class="form-group">
									<label class="col-sm-3 control-label">说明：</label>
									<div class="col-sm-8">
										<textarea id="ccomment" name="comment" class="form-control" required="" aria-required="true"></textarea>
									</div>
								</div>
-->
								<div class="form-group">
									<div class="col-sm-4 col-sm-offset-3">
										<button class="btn btn-primary" type="submit" >提交</button>
										<button class="btn btn-primary" type="button" onclick="javascript:history.back(-1);">返回</button>
									</div>
								</div>
								
							</form>
							
							
<!--
							<div class="form-group">
									<label class="col-sm-3 control-label">文件上传：</label>
									 <form action="http://localhost:8081/lecture/fileupload.do" method="post" enctype="multipart/form-data">
       								 <input type="file" name="file">
       								 <input type="submit" value="请先提交文件">
    								</form>
									
								</div>
-->
							
						</div>
					</div>
              
            </div>
		</div>	
	</div>
	<script src="js/ajaxfileupload.js" type="text/javascript"></script>
	<script>
		
		function uploadFile() {
// 				let form = document.getElementById('uploadForm'); //获取form表单
//
//  				let data = new FormData(form);//拿到表单创建FormData对象；
			
			var s = $('#fileUpload1')[0].files[0];
			var formData = new FormData();
        	formData.append("file", s);

				let url='http://localhost:8081/lecture/fileupload.do';

				 $.ajax({
							url: url,
							type: "POST",
							data: formData,
							contentType: false,
							processData: false,
							success: function (json) {
							//上传成功
								console.log(json);
								alert("success");
								$("#picture").val(json);
							},
							error: function (data) {
							 //上传失败
								alert("error");
							}
						});
			
		};
		
		//form 提交
		function uploadForm(){
			var style={
				stylename:$("#stylename").val(),
				styleid:$("#styleid").val(),
				colour:$("#colour").val(),
				standard:$("#standard").val(),
				size:$("#size").val(),
				material:$("#material").val(),
				price:$("#price").val(),
				picture:$("#picture").val()
			};
			console.log(style);
			$.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "http://localhost:8081/lecture/insertStyle" ,//url
                data: JSON.stringify(style),
				contentType: "application/json;charset=UTF-8",
                success: function (rsp) {
                   	console.log(rsp);
					if(rsp.respCode==="0"){
						alert("添加成功");
						window.location.href="tableKS.html";
						
					}else{
						alert(rsp.respDesc);
						
					}
					
					
				},
				error:function(){
					 window.location.href="500.html";
					
				}
            });
			return false;
		}
	</script>
</body>
</html>
